<template>
  <div>
    <div class="search-box">
      <el-input size="small" placeholder="请输入关键字搜索" v-model="value" class="input-with-select">
        <div slot="prefix" @click="search"><i type="text" size="small" class="el-icon-search"></i></div>
      </el-input>
      <el-button class="setBtn" icon="el-icon-setting" @click="setTableOpen"></el-button>
    </div>
    <settingTable :allData="allData" :selectedData="selectedData" ref="settingTable" @comfirm="setDone"></settingTable>
  </div>
</template>

<script>
  import settingTable from '@/components/settingTable'
  export default {
    props: {
      allData: {
        type: Array,
      },
      selectedData: {
        type: Array,
      },
    },
    components:{
      settingTable
    },
    data(){
      return {
        value:'',
      }
    },
    methods:{
      search(){
        this.$emit('search',this.value)
      },
      setTableOpen(){
        this.$refs.settingTable.init()
      },
      // 保存列表设置
      setDone(val){
        this.$emit('setTable',val)
      }
    }
  }
</script>

<style scoped lang="less">
.search-box{
  margin:10px 0 20px;
  display: flex;
}
.setBtn{
  margin-left: 10px;
  font-size: 26px;
  width: 46px;
  height: 32px;
  padding: 0;
  color: #898989;
}
.el-icon-search{
  color:#999999;
  line-height: 30px;
  font-size: 18px;
  font-weight: 700;
  padding: 0 2px;
  cursor: pointer;
}
</style>
